<template>
    <div>
        <div>
            <el-input
                    prefix-icon="el-icon-search"
                    size="mini"
                    style="width: 400px"
                    placeholder="请输入部门名称进行搜索..."
                    v-model="filterText">
            </el-input>

            <el-tree
                    :data="deps"
                    style="width: 400px"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree">
                <span class="custom-tree-node" style="display: flex; justify-content:space-between;width: 100%" slot-scope="{ data }">
        <span>{{ data.name }}</span>
        <span>
          <el-button
                  type="primary"
                  size="mini"
                  class="depButton"
                  @click="() => showAdddepView(data)">
            添加部门
          </el-button>
          <el-button
                  type="danger"
                  size="mini"
                  class="depButton"

                  @click="() => deleteDep(data)">
            删除部门
          </el-button>
        </span>
      </span>
            </el-tree>
            <el-dialog
                    title="添加部门"
                    :visible.sync="dialogVisible"
                    width="30%">
                <table>
                    <tr>
                        <td>
                            <el-tag>
                                上级部门
                            </el-tag>

                        </td>
                        <td>
                            {{pname}}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-tag>
                                部门名称
                            </el-tag>
                        </td>
                        <td>
                            <el-input v-model="dep.name" placeholder="请输入新的部门名称..."></el-input>
                        </td>
                    </tr>
                </table>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddDep">确 定</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DepMana",
        data(){
            return{
                filterText:'',
                deps:[],
                dialogVisible:false,
                dep:{
                   name:'',
                   parentId:'-1',

                },
                pname:'',
                defaultProps: {
                children: 'children',
                    label: 'name'
            }
            }
        }, watch: {
            filterText(val) {//内容发生变化则调用定义的方法
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.initDepartments();
        },
        methods:{
            addDep2Deps(deps,dep){
              for (let i=0;i<deps.length;i++){
                  let d = deps[i];
                  if (d.id==dep.parentId){
                      d.children = d.children.concat(dep);
                      if (d.children.length>0){
                          d.parent=true;
                      }
                      return;
                  }else {
                      this.addDep2Deps(d.children,dep);
                  }
              }
            },
            initAddDep(){
                this.dep={
                    name:'',
                    parentId:'-1',
                }
                this.pname='';
            },
            doAddDep(){
                this.postRequest("/system/basic/department/",this.dep).then(resp=>{
                    if (this.dep.name){
                        if (resp){
                            this.addDep2Deps(this.deps,resp.obj);
                            this.dialogVisible=false;
                            //初始化变量
                            this.initAddDep();
                        }
                    }

                })
            },
            showAdddepView(data){
                this.pname=data.name;
                this.dep.parentId=data.id;
                this.dialogVisible=true;


            },
            removeDepFromDeps(p,deps,id){
              for (let i=0;i<deps.length;i++){
                  let d =deps[i];
                  if (d.id==id){
                      deps.splice(i,1);
                      if (deps.length==0){
                          p.parent=false;
                      }
                      return;
                  }else {
                      this.removeDepFromDeps(d,d.children,id);
                  }

              }
            },
            deleteDep(data){
                if (data.parent){
                    this.$message.error("父部门删除失败！")
                }else{
                this.$confirm('是否删除【'+data.name+'】？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/department/"+data.id).then(resp=>{
                        if (resp){
                            this.removeDepFromDeps(null,this.deps,data.id);
                        }

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
            },
            initDepartments(){
              this.getRequest("/system/basic/department/").then(resp=>{
                  if (resp){
                      this.deps=resp;
                  }
              })
            },
            filterNode(value, data) {
                if (!value) return true;//空则保留data
                return data.name.indexOf(value) !== -1;//查询部门
            }
        },

    }
</script>

<style>
    .depButton{
        padding: 2px;
    }

</style>